<template>
  <o-modal
    v-model="isShow"
    :title="config.modalTitle"
    :size="config.modalSize"
    :mask="true"
    :tap-close="false"
    :show-footer="true"
    @on-ok="selectOk"
    @on-close="selectClose"
  >
    <div slot="content" class="selectbox clear">
      <RadioGroup v-model="toRole.title" @on-change="toRoleChange">
        <Radio
          v-for="item in config.data"
          :label="item.title"
          :key="item.title"
        >
          <span>{{ item.title }}</span>
        </Radio>
      </RadioGroup>
    </div>
  </o-modal>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import oModal from '@/components/base/modal/o-modal/index.vue';
import { RadioGroup, Radio } from 'view-design';
import { Tsrv } from '@/services';

interface datas {
  title: string;
  roleType: number;
  objId: string;
}

interface config {
  modalTitle?: string;
  modalSize?: Array<number>;
  data: Array<datas>;
}

interface toRole {
  roleType: number;
  objId: string;
  title: string;
}

@Component({
  components: {
    oModal
  }
})
export default class oAuditSelect extends Vue {
  @Prop() config: config;

  @Prop() id: string;

  private isShow: boolean = false;

  private toRole: toRole = {
    roleType: null,
    objId: null,
    title: ''
  };

  created() {}

  mounted() {
    this.show();
  }

  public show() {
    this.isShow = true;
  }

  public hide() {
    this.$bus.$emit(`modal_${this.id}`);
    this.isShow = false;
  }

  public selectOk() {
    this.$bus.$emit(`modal_${this.id}`, this.toRole);
    this.hide();
  }

  public selectClose() {
    this.hide();
  }

  public toRoleChange(e: any) {
    const find = Tsrv.utils.find(this.config.data, el => el.title === e);
    this.toRole.roleType = find.roleType;
    this.toRole.objId = find.objId;
  }
}
</script>

<style lang="scss" scoped>
.selectbox {
  padding: 0 20px;
  height: 100%;
  overflow-y: scroll;

  &::-webkit-scrollbar {
    width: 6px;
    background: #f5f5f5;
    border-radius: 6px;
  }
  &::-webkit-scrollbar-track-piece {
    background: #fff;
    border-radius: 6px;
  }
  &::-webkit-scrollbar-thumb {
    background: #b1b1b1;
    border-radius: 6px;
  }
  .ivu-radio-group {
    width: 100%;
    .ivu-radio-wrapper {
      width: 100%;
      padding: 6px 0;
      border-bottom: 1px dashed #e4e4e4;
      ::v-deep .ivu-radio-inner:after {
        border-radius: 6px;
      }
    }
  }
}
</style>
